﻿<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>WebGL Render</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="app.js"></script>
    <script src="util/FileHelper.js"></script>
    <script id="shader-vs" type="x-shader/x-vertex">
        attribute vec3 position;
        attribute vec2 textureCoord;
        attribute vec3 color;
        attribute vec3 normal;
        uniform mat4   Pmatrix;
        uniform mat4   Vmatrix;
        uniform mat4   Mmatrix;
        uniform vec3   lightColor;
        uniform vec3   lightDirection;
        uniform vec3   lightEnvironment;
        varying vec2   vTextureCoord;
        varying vec3   vColor;
        void main(void)
        {
            gl_Position = Pmatrix * Vmatrix * Mmatrix * vec4(position, 1.0);
            vTextureCoord = textureCoord;
            vec3 nor_dir = (Mmatrix * vec4(normal, 0.0)).xyz;
            float li_we = max(-dot(lightDirection, nor_dir), 0.0);
            vec3 li = li_we * lightColor;
            vColor = color * li + lightEnvironment;
        }
    </script>
    <script id="shader-fs" type="x-shader/x-fragment">
        precision mediump float;
        
        uniform sampler2D texture;
        varying vec3      vColor;
        varying vec2      vTextureCoord;
        void main(void)
        {
            vec4 smpColor = texture2D(texture, vTextureCoord);
            gl_FragColor = vec4(vColor, 1.0) * smpColor;
        }
    </script>
    <script id="texture-vs" type="x-shader/x-vertex">
        attribute vec3 position;
        attribute vec2 textureCoord;
        uniform mat4   Pmatrix;
        uniform mat4   Vmatrix;
        uniform mat4   Mmatrix;
        varying vec2   vTextureCoord;
        void main(void)
        {
            vTextureCoord = textureCoord;
            gl_Position   = Pmatrix * Vmatrix * Mmatrix * vec4(position, 1.0);
        }
    </script>
    <script id="texture-fs" type="x-shader/x-fragment">
        precision mediump float;

        uniform sampler2D texture;
        varying vec2      vTextureCoord;
        void main(void)
        {
            gl_FragColor = texture2D(texture, vTextureCoord);
        }
    </script>
</head>
<body>
    <canvas id="glcanvas">
        Your browser doesn't appear to support the canvas element.
    </canvas>
    <br>
    半径<input id="sr" type="text" value="1" style="width: 64px"/>
    宽分段<input id="sw" type="text" value="16" style="width: 64px"/>
    高分段<input id="sh" type="text" value="12" style="width: 64px"/>
    <button id="drawSphere">绘制球</button>
    <button id="changeTexture">替换材质</button>
    <br>
    半径<input id="cr" type="text" value="1" style="width: 64px"/>
    高<input id="ch" type="text" value="4" style="width: 64px"/>
    分段<input id="cn" type="text" value="32" style="width: 64px"/>
    <button id="drawCylinder">绘制圆柱</button>
    <button id="changeTexture">替换材质</button>
    <button id="downloadModel">下载模型</button>
    <br>
    <input id="loadModel" type="file" multiple/>
</body>
</html>
